<!--举报管理-->
<template>
  <div>
    <el-card class="box-card">
      <div class="BigDiv">
        <el-input class="ElInput" placeholder="举报人" v-model="reportMhcData.hname"></el-input>
        <el-input class="ElInput" placeholder="举报备注" v-model="reportMhcData.reportContent" style="margin-left: 20px"></el-input>
        <el-select v-model="reportMhcData.reportType" placeholder="全部" style="margin-left: 20px">
          <el-option label="全部" :value=3></el-option>
          <el-option label="帖子" :value=0></el-option>
          <el-option label="评论" :value=1></el-option>
          <el-option label="房子" :value=2></el-option>
        </el-select>
        <el-button icon="el-icon-search" type="primary" style="margin-left: 20px" @click="reportButton()"></el-button>
        <!--表格-->
        <el-table :data="reportData" height="250" border style="margin-top: 10px;width: 100%">
          <el-table-column prop="hname" label="举报人" width="180"></el-table-column>
          <el-table-column prop="reportType" label="举报类型" width="180">
            <template slot-scope="scope">
              <span v-if="scope.row.reportType == 0">帖子</span>
              <span v-if="scope.row.reportType == 1">评论</span>
              <span v-if="scope.row.reportType == 2">房子</span>
            </template>
          </el-table-column>
          <el-table-column prop="reportTime" label="举报时间" width="180"></el-table-column>
          <el-table-column prop="reportContent" label="举报备注" width="180"></el-table-column>
          <el-table-column label="举报图片" width="180">
            <template slot-scope="scope">
              <el-image style="width: 70px;" :src="scope.row.reportPicture" class="el-image__preview">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="审核状态" width="180">
            <template slot-scope="scope">
              <span v-if="scope.row.examineState == 0">通过</span>
              <span v-if="scope.row.examineState == 1">不通过</span>
              <span v-if="scope.row.examineState == 2">未审核</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.examineState == 2"><el-button type="text" @click="examineVisible = true;examine(scope.row.reportNumber)">审核</el-button></span>
              &nbsp;&nbsp;&nbsp;
              <span><el-button type="text" @click="deleteOpen(scope.row.reportNumber)">删除</el-button></span>
            </template>
          </el-table-column>
        </el-table>
        <!--表格-->
      </div>
    </el-card>
    <!--分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="reportMhcData.pageNum"
        :page-sizes="[8, 10, 15, 20]"
        :page-size="reportMhcData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--分页-->
<!--    审核弹窗-->
    <el-dialog
        title="审核"
        :visible.sync="examineVisible"
        width="15%"
        :before-close="handleClose">
      <span>举报审核</span>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="examineAdopt()">通 过</el-button>
    <el-button type="danger" @click="examineCancel()">拒 绝</el-button>
  </span>
    </el-dialog>
<!--    审核弹窗-->
  </div>
</template>

<script>
export default {
  /*Data*/
  data() {
    return {
      // 举报全查数据
      reportData: [],
      // 举报模糊查所需数据
      reportMhcData: {
        // 举报人名称
        hname: '',
        // 举报类型
        reportType: 3,
        // 举报内容
        reportContent: '',
        // 当前页数
        pageNum: 1,
        // 每页的数据条数
        pageSize: 10
      },
      // 全查数据总条数
      total: 0,
      // 审核弹窗开/关
      examineVisible: false,
      // 举报编号
      reportNumber:'',
    }
  },
  /*自动挂载*/
  mounted() {
    // 举报全查
    this.reportCheck()
  },
  /*函数*/
  methods:{
    // 举报全查
    reportCheck() {
      this.$axios.post("/memberWlj/reportController/reportCheck", this.reportMhcData)
        .then(res => {
          // console.log(res.data.obj.msg)
          if(res.status === 200){
            this.reportData = res.data.obj.msg
          }else{
            this.$notify({
              title: '错误',
              message: '查询错误',
              type: 'error'
            })
          }
        })
    },
    // 分页
    handleSizeChange(ps) {
      console.log("size::::" + ps)
      this.reportMhcData.pageSize = ps
      this.reportCheck()
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(ps) {
      console.log("current::::::" + ps)
      this.reportMhcData.pageNum = ps
      this.reportCheck()
      // console.log(`当前页: ${val}`);
    },
    // 查询按钮
    reportButton() {
      // 全查
      this.reportCheck()
      // 清空模糊查数据
      this.empty()
    },
    // 清空模糊查数据
    empty() {
      this.reportMhcData.hname = ''
      this.reportMhcData.reportType = 3
      this.reportMhcData.reportContent = ''
      this.reportMhcData.pageNum = 1
      this.reportMhcData.pageSize = 10
    },
    // 举报编号(审核)
    examine(reportNumber) {
      this.reportNumber = reportNumber
      // console.log(this.reportNumber)
    },
    // 关闭审核弹窗确定/取消
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    // 审核通过
    examineAdopt() {
      try{
        this.$axios.post("/memberWlj/reportController/examineAdopt/" + this.reportNumber)
            .then(res => {
              // console.log(res)
              if(res.status === 200){
                // 日志
                this.insertLog("举报审核通过")
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                })
                // 全查
                this.reportCheck()
              }
            })
      }catch (error) {
        console.log(error)
      }finally {
        // 关闭审核弹窗
        this.examineVisible = false
      }
    },
    // 审核不通过
    examineCancel() {
      try{
        this.$axios.post("/memberWlj/reportController/examineReport/" + this.reportNumber)
            .then(res => {
              // console.log(res)
              if(res.status === 200){
                // 日志
                this.insertLog("举报审核不通过")
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                })
                // 全查
                this.reportCheck()
              }
            })
      }catch (error) {
        console.log(error)
      }finally {
        // 关闭审核弹窗
        this.examineVisible = false
      }
    },
    // 删除弹窗
    deleteOpen(reportNumber) {
      this.$confirm('此操作将永久删除该举报信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 点确定
        this.$axios.post("/memberWlj/reportController/deleteReport/" + reportNumber)
            .then(res => {
              if(res.status === 200){
                // 日志
                this.insertLog("删除审核")
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                // 全查
                this.reportCheck()
              }
            })
      }).catch(() => {
        // 点取消
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style>
.examineStyle{
  background-color: #a80a0a;
  color: white;
}
*{
  margin: 0;
  padding: 0;
}
.ElInput{
  width: 200px;
}
.box-card{
  height: 820px;
  margin: 10px;
}
</style>